<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="format-detection" content="telephone=no">

        <title>统计</title>

        <link rel="stylesheet" href="css/statistics.css?t=201612261445" />
    </head>
    <body id="statistics" v-cloak>
      <div class="summary">
        <div class="today">
          <p>今日销售额(万元)</p>
          <p>{{ todaySaleAmount }}</p>
        </div>
        <div class="split"></div>
        <div class="rate">
          <p>销售额同比<span>{{ daySaleYoy }}</span></p>
          <a href="javascript:app.heroRank('00000290', '', '')">完成率排名<span>{{ rank }}</span></a>
        </div>
      </div>
    	<!--统计提示-->
		<div class="statistics-tips">{{month}}月销售任务{{taskSaleAmount | convert}}万元，毛利任务{{taskGrossProfit | convert}}万元</div>
		<div class="statistics-wrap">
			<div class="item">
				<div class="title"><span>本月销售额(万元)</span><span>{{thisMonSaleAmount | convert}}万元({{monYoy | percent}})</span></div>
				<div class="month-chart" id="month-chart">

				</div>
				<div class="month-tips">
					<div class="name"><span>其他：</span></div>
					<div class="list">
						{{tipsText}}
					</div>
				</div>
			</div>
			<div class="item">
				<div class="title"><span>销售额完成率</span><span>{{saleCompleteRate}}</span></div>
				<div class="sale-chart">
					<div class="sale-box" id="sale-chart"></div>
					<div class="name-list">
						<ul>
							<li v-for="item in saleItems">{{item.name}}</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="item">
				<div class="title"><span>客单价(元)／客单价同比</span></div>
				<div class="compare-list">
					<ul class="name">
						<li>品类</li>
						<li>客单价</li>
						<li>客单价同比</li>
					</ul>
					<ul v-for="item in items" v-show="item.categoryCode | iconSelect">
						<li><span class="sprites" :class="item.categoryCode | iconSelect"></span>{{item.categoryName}}</li>
						<li>{{item.custAvgPrice | two}}</li>
						<li>{{item.custAvgPriceYoy | percent}}</li>
					</ul>
				</div>
			</div>
			<div class="module-box" @click="appRefund(1)">
				<p class="title">本月退货</p>
        <div class="info-box">
          <div class="total">
            <p>退货金额</p>
            <p class="data"><span>{{ refundInfo.refund }}</span>万元</p>
            <a href="javascript:;" class="rank" @click.stop="appRefund(2)">排名{{ refundInfo.rank }}</a>
          </div>
          <div class="info">
            <p>退&nbsp;&nbsp;&nbsp;货&nbsp;&nbsp;&nbsp;数<span>{{ refundInfo.retGdsNum }}件</span></p>
            <p>退&nbsp;&nbsp;&nbsp;货&nbsp;&nbsp;&nbsp;率<span>{{ refundInfo.retGdsRate }}</span></p>
            <p>退货数环比<span>{{ refundInfo.mom }}</span></p>
          </div>
        </div>
			</div>
			<div class="module-box" @click="appOos">
				<p class="title">昨日缺货</p>
        <div class="info-box">
          <div class="total">
            <p>总体缺货数</p>
            <p class="data"><span>{{ oos.generalOosNum }}</span>件</p>
          </div>
          <div class="info">
            <p>主推缺货数<span>{{ oos.mainPushOosNum }}件</span></p>
            <p>主推缺货率<span>{{ oos.mainPushOosRate }}</span></p>
            <p>热销缺货数<span>{{ oos.hotOosNum }}件</span></p>
            <p>热销缺货率<span>{{ oos.hotOosRate }}</span></p>
          </div>
        </div>
			</div>
			<div class="module-box" @click="appCateList">
				<p class="title">已销未提</p>
        <div class="info-box">
          <div class="total">
            <p>已销未提数</p>
            <p class="data"><span>{{ cateList.totalNum }}</span>件</p>
          </div>
          <div class="info">
            <p>回 访 单 数<span>{{ cateList.reVisitNum }}单</span></p>
            <p>待 发 货 数<span>{{ cateList.waitForSendNum }}件</span></p>
          </div>
        </div>
			</div>
			<div class="module-box" @click="appContributions">
				<p class="title">样机（近30日）</p>
        <div class="info-box">
          <div class="total">
            <p>贡献率</p>
            <p class="data"><span>{{ contributions.rate }}</span></p>
          </div>
          <div class="info">
            <p>样机销售额<span>{{ contributions.saleAmount }}万元</span></p>
            <p>店总销售额<span>{{ contributions.totalAmount }}万元</span></p>
          </div>
        </div>
			</div>
		</div>

		<script src="js/zepto.min.js" type="text/javascript"></script>
		<script src="js/vue.min.js" type="text/javascript"></script>
		<script src="js/vue-resource.min.js" type="text/javascript"></script>
		<script src="js/echarts.min.js" type="text/javascript"></script>
		<script src="js/common.js?t=201612261445" type="text/javascript"></script>
		<script type="text/javascript">
			var vm = new Vue({
        el: '#statistics',
        data: {
          items: [],
          saleItems: [],
          chartItems: [],
          tipsItems: [],
          tipsText: "",
          monthChart: null,
          saleChart: null,
          sunNum: 0,

          month: "",
          taskSaleAmount: 0,
          taskGrossProfit: 0,
          saleCompleteRate: "",
          monYoy: "",

          yestdSaleAmount: "",
          thisMonSaleAmount: "",

          err: false,
          errCtt: "",

          todaySaleAmount: "",
          daySaleYoy: "",
          rank: "",
          refundInfo: {
            refund: '--',
            retGdsNum: '--',
            retGdsRate: '--',
            mom: '--',
            rank: '--'
          },
          oos: {
            generalOosNum: '--',
            mainPushOosNum: '--',
            mainPushOosRate: '--',
            hotOosNum: '--',
            hotOosRate: '--'
          },
          cateList: {
            totalNum: '--',
            reVisitNum: '--',
            waitForSendNum: '--'
          },
          contributions: {
            rate: '--',
            saleAmount: '--',
            totalAmount: '--'
          }
        },
        methods: {
        	compare: function(property){
					    return function(a,b){
					        var value1 = a[property];
					        var value2 = b[property];
					        return value1 - value2;
					    }
					},
					percentNumEnd: function(num){
						if(num>0){
							num = num*100;
                			return "+" + num.toFixed(1);
						}else{
							num = num*100;
                			return num.toFixed(1);
						}
        	},
        	percentNum: function(num){
        		num = num*100;
        		return num.toFixed(1);
        	},
        	percentNumChart: function(num){
        		if(num!=null){
        			num = num*100;
          		if(num>100){
          			return num.toFixed(0);
          		}else{
          			return num.toFixed(1);
          		}
        		}else{
        			return '0.0'
        		}
        	},
        	percentChart: function(num){
        		if(num>1){
        			num = 100;
        			return num;
        		}else{
        			num = num*100;
        			return num.toFixed(1);
        		}
        	},
        	getMonthChart: function(){
        		this.$http.post(DI.getStoreSaleDetail, {
						}).then(function(res) {
							var result = res.data;
							var dataList = [];
//							var resData = result.dataSale;
							var tipsData = [];
							var resData = result.data;
							if(result.retFlag=="1"){

								this.items = resData;

								for (var i = 0; i < resData.length; i++) {
//									console.log(resData[i].saleAmount);
									var percentNum = resData[i].categoryYoy;
									var saleAmount = resData[i].saleAmount;
									if(percentNum!=null){
										percentNum = this.percentNumEnd(percentNum)+"%";
									}else{
										percentNum = "--"
									}
									if(saleAmount!=null){
										saleAmount = (resData[i].saleAmount/10000).toFixed(2);
									}else{
										saleAmount = "--"
									}
									dataList.push({
										name:resData[i].categoryName ? resData[i].categoryName : '未知',
										value: saleAmount,
										percent:percentNum
									})
								}
//								console.log(dataList);
								dataList.sort(this.compare("value")).reverse();
								this.chartItems = dataList.slice(0,4);
								this.tipsItems = dataList.slice(4);
								for (var i = 0; i < this.tipsItems.length; i++) {
									this.sunNum += parseFloat(this.tipsItems[i].value);
									tipsData.push(this.tipsItems[i].name + this.tipsItems[i].value +"(" + this.tipsItems[i].percent + ")");
								}
								this.tipsText = tipsData.join("、");
//								console.log(this.tipsText);
								this.chartItems.push({
									name:"其他",
									value: vm.sunNum.toFixed(2)
								});

								this.monthChart = echarts.init(document.getElementById('month-chart'));
				            	option = {
				            		animation: false,
				            		tooltip: {
								        trigger: 'item',
								        formatter : function(params,ticket,callback){
								        	var res;
								        	if(params.name!="其他"){
								        		res = params.name + '：' + params.value + '<br/>占比：'+ params.percent.toFixed(1) +'%<br/>同比：' + params.data.percent;
//								        		res = '销售额：' + params.value + '<br/>占　比：'+ params.percent.toFixed(1) +'%<br/>同　比：' + params.data.percent;
								        	}else{
								        		res = params.name + '：' + params.value + '<br/>占比：'+ params.percent.toFixed(1) +'%';
//								        		res = '销售额：' + params.value + '<br/>占　比：'+ params.percent.toFixed(1) +'%';
								        	}
				                        	return res;
				                        }
//								        formatter: "{b}: {c} ({d}%)"
								    },
								    series: [
								        {
								            type:'pie',
								            radius: ['35%', '70%'],
								            color:['#15B374','#f26831','#43a2e7','#f7a708','#ffd328','#ab96f5','#9FE44C','#54CFCA','#7FCF79','#DF649C','#8168F8'],
								            itemStyle: monthStyle,
								            data: vm.chartItems
								        }
								    ]
								};
								this.monthChart.setOption(option);
							}
						}, function(req) {

						});
          },
          getSaleChart: function(){
          	this.$http.post(DI.getStoreKeeperSaleData, {
						}).then(function(res) {
							var result = res.data;
							var dataList = [];
//							var resData = result.dataTip;
							var resData = result.data;
							if(result.retFlag=="1"){
								for (var i = 0; i < resData.cateSaleCompleteRates.length; i++) {
									var completeRate = resData.cateSaleCompleteRates[i].completeRate;
									if(completeRate!=null){
										completeRate = this.percentChart(completeRate);
									}else{
										completeRate = 0
									}
									dataList.push({
										name:resData.cateSaleCompleteRates[i].cateName ? resData.cateSaleCompleteRates[i].cateName : '未知',
										value: completeRate,
										realValue:this.percentNumChart(resData.cateSaleCompleteRates[i].completeRate),
									})
								}
								if(resData.saleCompleteRate!=null){
									this.saleCompleteRate = this.percentNum(resData.saleCompleteRate) + "%";
								}else{
									this.saleCompleteRate = "--"
								}
								this.monYoy = resData.monYoy;

                // 1219需求
                this.todaySaleAmount = resData.todaySaleAmount ? (resData.todaySaleAmount / 10000).toFixed(2) : '--';
                this.daySaleYoy = resData.daySaleYoy ? (resData.daySaleYoy * 100).toFixed(1) + '%' : '--';
                this.rank = resData.rank ? resData.rank : '--';
                // end

								this.saleItems = dataList;
								this.saleChart = echarts.init(document.getElementById('sale-chart'));
				            	optionList = {
								    series: [
								        {
								            type:'pie',
								            radius: ['20%', '28%'],
								            center : ['14%', '22%'],
								            color:['#15B374','#F7F7F7'],

								            data:[
								                {value:dataList[0].value, name:dataList[0].name, realValue:dataList[0].realValue, itemStyle:valueStyle},
								                {value:100-dataList[0].value, name:'', itemStyle:noneStyle}
								            ]
								        },
								        {
								            type:'pie',
								            radius: ['20%', '28%'],
								            center : ['38%', '22%'],
								            color:['#f26831','#F7F7F7'],

								            data:[
								                {value:dataList[1].value, name:dataList[1].name, realValue:dataList[1].realValue, itemStyle:valueStyle},
								                {value:100-dataList[1].value, name:'', itemStyle:noneStyle}
								            ]
								        },
								        {
								            type:'pie',
								            radius: ['20%', '28%'],
								            center : ['62%', '22%'],
								            color:['#43a2e7','#F7F7F7'],

								            data:[
								                {value:dataList[2].value, name:dataList[2].name, realValue:dataList[2].realValue, itemStyle:valueStyle},
								                {value:100-dataList[2].value, name:'', itemStyle:noneStyle}
								            ]
								        },
								        {
								            type:'pie',
								            radius: ['20%', '28%'],
								            center : ['86%', '22%'],
								            color:['#f7a708','#F7F7F7'],

								            data:[
								                {value:dataList[3].value, name:dataList[3].name, realValue:dataList[3].realValue, itemStyle:valueStyle},
								                {value:100-dataList[3].value, name:'', itemStyle:noneStyle}
								            ]
								        },
								        {
								            type:'pie',
								            radius: ['20%', '28%'],
								            center : ['14%', '68%'],
								            color:['#ffd328','#F7F7F7'],

								            data:[
								                {value:dataList[4].value, name:dataList[4].name, realValue:dataList[4].realValue, itemStyle:valueStyle},
								                {value:100-dataList[4].value, name:'', itemStyle:noneStyle}
								            ]
								        },
								        {
								            type:'pie',
								            radius: ['20%', '28%'],
								            center : ['38%', '68%'],
								            color:['#ab96f5','#F7F7F7'],

								            data:[
								                {value:dataList[5].value, name:dataList[5].name, realValue:dataList[5].realValue, itemStyle:valueStyle},
								                {value:100-dataList[5].value, name:'', itemStyle:noneStyle}
								            ]
								        },
								        {
								            type:'pie',
								            radius: ['20%', '28%'],
								            center : ['62%', '68%'],
								            color:['#9FE44C','#F7F7F7'],

								            data:[
								                {value:dataList[6].value, name:dataList[6].name, realValue:dataList[6].realValue, itemStyle:valueStyle},
								                {value:100-dataList[6].value, name:'', itemStyle:noneStyle}
								            ]
								        },
								        {
								            type:'pie',
								            radius: ['20%', '28%'],
								            center : ['86%', '68%'],
								            color:['#54CFCA','#F7F7F7'],

								            data:[
								                {value:dataList[7].value, name:dataList[7].name, realValue:dataList[7].realValue, itemStyle:valueStyle},
								                {value:100-dataList[7].value, name:'', itemStyle:noneStyle}
								            ]
								        }
								    ]
								};
								this.saleChart.setOption(optionList);
							}
						}, function(req) {

						});
          },
          appRefund: function(type) {
            if(this.refundInfo.refund != '--'){
              if(type == 1){
                app.retStatics('', '');
              }else{
                app.retRank('', '');
              }
            }else{
              app.showError('暂无数据哦~');
            }
          },
          appOos: function() {
            if(this.oos.generalOosNum != '--'){
                app.stockStatics('', '');
            }else{
              app.showError('暂无数据哦~');
            }
          },
          appCateList: function() {
            if(this.cateList.totalNum != '--'){
                app.yxwtStatics('00000290', '', '');
            }else{
              app.showError('暂无数据哦~');
            }
          },
          appContributions: function() {
            if(this.contributions.rate != '--'){
                app.prototypeStatics('');
            }else{
              app.showError('暂无数据哦~');
            }
          }
        },
        ready: function(){
      		this.$http.post(DI.getSaleStatistic).then(function(res) {
						var result = res.data;
						if(result.retFlag == "1"){
              var resData = result.data[0];
							this.month = resData.month;
							this.taskSaleAmount = resData.taskSaleAmount ? resData.taskSaleAmount : 0;
							this.taskGrossProfit = resData.taskGrossProfit ? resData.taskGrossProfit : 0;
							this.yestdSaleAmount = resData.yestdSaleAmount;
							this.thisMonSaleAmount = resData.thisMonSaleAmount;
						}
					}, function(req) {
					});

          // 1219需求
      		this.$http.post(DI.returnGoods).then(function(res) {
						var result = res.data.data;
						if(result){
              var refundInfo = result.refundInfo;
              var oos = result.oos;
              var cateList = result.cateList;
              var contributions = result.contributions;

              if(refundInfo){
                var refundInfoDetail = refundInfo[0];
                this.refundInfo.refund = refundInfoDetail.refund ? (refundInfoDetail.refund / 10000).toFixed(2) : '--';
                this.refundInfo.retGdsNum = refundInfoDetail.retGdsNum ? refundInfoDetail.retGdsNum : '--';
                this.refundInfo.retGdsRate = refundInfoDetail.retGdsRate ? (refundInfoDetail.retGdsRate * 100).toFixed(1) + '%' : '--';
                this.refundInfo.mom = refundInfoDetail.mom ? (refundInfoDetail.mom * 100).toFixed(1) + '%' : '--';
                this.refundInfo.rank = refundInfoDetail.rank ? refundInfoDetail.rank : '--';
              }
              if(oos){
                var oosDetail = oos[0];
                this.oos.generalOosNum = oosDetail.generalOosNum ? oosDetail.generalOosNum : '--';
                this.oos.mainPushOosNum = oosDetail.mainPushOosNum ? oosDetail.mainPushOosNum : '--';
                this.oos.mainPushOosRate = oosDetail.mainPushOosRate ? (oosDetail.mainPushOosRate * 100).toFixed(1) + '%' : '--';
                this.oos.hotOosNum = oosDetail.hotOosNum ? oosDetail.hotOosNum : '--';
                this.oos.hotOosRate = oosDetail.hotOosRate ? (oosDetail.hotOosRate * 100).toFixed(1) + '%' : '--';
              }
              if(cateList){
                var cateListDetail = cateList[0];
                this.cateList.totalNum = cateListDetail.totalNum ? cateListDetail.totalNum : '--';
                this.cateList.reVisitNum = cateListDetail.reVisitNum ? cateListDetail.reVisitNum : '--';
                this.cateList.waitForSendNum = cateListDetail.waitForSendNum ? cateListDetail.waitForSendNum : '--';
              }
              if(contributions){
                var contributionsDetail = contributions[0];
                this.contributions.rate = contributionsDetail.rate ? contributionsDetail.rate + '%' : '--';
                this.contributions.saleAmount = contributionsDetail.saleAmount ? (contributionsDetail.saleAmount / 10000).toFixed(2) : '--';
                this.contributions.totalAmount = contributionsDetail.totalAmount ? (contributionsDetail.totalAmount / 10000).toFixed(2) : '--';
              }
            }
					}, function(req) {
					});

					this.getMonthChart();
					this.getSaleChart();
					window.onresize = function(){
			            vm.monthChart.resize();
			            vm.saleChart.resize();
			        }
                }
            });
            Vue.filter('two', function(value) {
            	if(value!=null){
        			return value.toFixed(2);
        		}else{
        			return "--";
        		}
			});
            Vue.filter('percent', function(value) {
            	if(value!=null){
            		value = value*100;
					if(value>0){
						return "+" + parseFloat(value.toFixed(1)) + "%";
					}else{
						return parseFloat(value.toFixed(1)) + "%";
					}
            	}else{
            		return "--"
            	}
			});
			Vue.filter('convert', function(value) {
				if(value<100){
					return "0.00"
				}else{
					value = value/10000;
					return value.toFixed(2);
				}
			});
			Vue.filter('iconSelect', function(value) {
				switch(value) {
					case "00001":
						return "i-icon-air";
						break;
					case "00002":
						return "i-icon-ice";
						break;
					case "00003":
						return "i-icon-tv";
						break;
					case "00004":
						return "i-icon-3c";
						break;
					case "00005":
						return "i-icon-pc";
						break;
					case "00006":
						return "i-icon-phone";
						break;
					case "00007":
						return "i-icon-goods";
						break;
					case "00013":
						return "i-icon-bathroom";
						break;
					default:
						return false;
						break;
				}
			});

            var monthStyle = {
	            	normal : {
	                    label : {
	                        show : true,
	                        formatter : '{b} {c}',
//	                        formatter : function(params,ticket,callback){
//	                        	var res = params.name + ' ' + params.value + '\n同比 ' + params.data.percent;
//	                        	return res;
//	                        },
	                        textStyle: {
	                        	color : '#666666',
	                            baseline : 'bottom'
	                        }
	                    }
	                }
	           };
			var valueStyle = {
	            	normal : {
	                    label : {
	                        show : true,
	                        position : 'center',
//	                        formatter : '{c}%',
	                        formatter : function(params,ticket,callback){
	                        	var res = params.data.realValue + '%';
	                        	return res;
	                        },
	                        textStyle: {
	                            baseline : 'bottom'
	                        }
	                    },
	                    labelLine : {
	                        show : false
	                    }
	                }
	            };
            var otherStyle = {
	            	normal : {
	                    label : {
	                        show : true,
	                        position : 'center',
	                        formatter : '{a}',
	                        textStyle: {
	                            baseline : 'bottom',
	                            color: '#666666'
	                        }
	                    },
	                    labelLine : {
	                        show : false
	                    }
	                }
	            };
	        var noneStyle = {
	            	normal : {
	                    label : {
	                        show : false
	                    },
	                    labelLine : {
	                        show : false
	                    }
	                }
	            };
		</script>
    </body>
</html>
